---
type: tutorial
unitTitle: Astro UI 컴포넌트를 사용하여 빌드 및 디자인
title: '체크인: 3단계 - 컴포넌트'
description: |-
  튜토리얼: 첫 번째 Astro 블로그 구축 - Astro 컴포넌트를 구축하여 웹 사이트 전체의 공통 요소에 대한 코드를 재사용
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';

이제 웹 사이트의 전체 페이지를 생성하는 `.astro` 및 `.md` 파일이 있으므로 Astro 컴포넌트를 사용하여 더 작은 HTML 조각을 만들고 재사용할 때입니다!

## 학습 내용 미리보기

이 단계에서는 **Astro 컴포넌트**를 생성하여 웹사이트 전체의 공통 요소에 대한 코드를 재사용하는 방법을 알아봅니다.

다음을 빌드합니다.
- 페이지 링크 메뉴를 표시하는 탐색 컴포넌트
- 각 페이지 하단에 포함할 바닥글 컴포넌트
- 프로필 페이지로 연결되는 바닥글에 사용되는 소셜 미디어 컴포넌트
- 모바일에서 탐색을 전환하는 대화형 햄버거 컴포넌트

그 과정에서 CSS와 JavaScript를 사용하여 화면 크기와 사용자 입력에 반응하는 반응형 디자인을 구축하게 됩니다.

<Box icon="check-list">
## 체크리스트

<Checklist>
- [ ] Astro 컴포넌트를 만들 준비가 되었습니다!
</Checklist>
</Box>
